<template>
    <transition name='fadeIn'>
        <div id="wSearch">
          <!-- 搜索 -->
            <div class="search_top">
                <my-header class='header'>
                    <a class="back-black" slot='left' @click.stop='$router.go(-1)'></a>
                    <form class='form' slot='mid' @submit.prevent="get_search">
                        <i class="form_icon icon-search"></i>
                        <input class='form_input' type="search" placeholder="搜索你想找的会员" >
                    </form>
                    <a class='search_btn' slot='right' @click.stop="get_search" >搜索</a>
                </my-header>
            </div>
            <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
                <div class="container" v-swiper:swiperRight='true'>
                    <fans-list :itemJson="contentJson"></fans-list>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'wSearch',
    data() {
        return {
            contentJson: []
        }
    },
    computed: {
        ...mapGetters('index', [
            'indexPage',
            'indexLocation',
            'indexColumn'
        ])
    },
    watch: {
    },
    methods: {
    }
}
</script>
<style lang='stylus'>
#wSearch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    background : #ffffff;
    .search_top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        header {
            background: #fff;
            border-bottom: 1px solid #eee;
            .form {
                position: relative;
                display: flex;
                align-items: center;
                color: #aaa;
                font-size: 14px;
                background: #fff;
                border: 1px solid #ddd;
                padding: 0.13rem 0.267rem;
                .form_icon {
                }
                .form_input {
                    width: 100%;
                    color: #666;
                    padding-left: 0.13rem;
                    margin: 0;
                    outline: none;
                    -webkit-appearance: none;
                    &::-webkit-input-placeholder{color:#c8c8c9;font-size: 12px}
                    &::-moz-placeholder{color:#c8c8c9;font-size: 12px}
                    &:-ms-placeholder{color:#c8c8c9;font-size: 12px}
                }
            }
            .search_btn{
                color: #aaa;
                font-size: 14px;
                &.on{
                    color: #00939c;
                    font-weight: bold;
                }
            }
        }
    }
    .content {
        background-color: #ffffff;
    }
}
</style>
